
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/echarts/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/echarts/jquery-2.1.0.js"></script>
</head>
<body>
<div class="layui-collapse">
    <form class="layui-form" lay-filter="formTest">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">搜索</h2>
            <div class="layui-colla-content layui-show">
                <label class="layui-form-label" style="width: 30%">日期范围:</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="cpdate" id="test10" placeholder=" 请选择时间 " style="width: 300px">
                </div>

                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit=""  id="serachBtn" style="margin-left: 6px;">立即查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>

    <div class="layui-colla-item">
        <h2 class="layui-colla-title">营销额预览排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:50%;">
            <div id="box1" style="width: 40%;height:100%;float: left;margin-left: 5%"></div>
            <div id="box2" style="width: 40%;height:100%;float: left;margin-left: 10%"></div>
        </div>
        <div id="box1_1" style="margin-left: 310px;"></div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">商品销量预览排行</h2>
        <div class="layui-colla-content layui-show" style="width: 96%;height:70%;">
            <div id="box3" style="height: 100%;width:100%;float: left;margin-left: 1%"></div>
        </div>
    </div>
</div>
</body>

<script>

    Date.prototype.toLocaleStringTomorrow = function() {
        var dateTime=new Date();
        dateTime=dateTime.setDate(dateTime.getDate()+1);
        dateTime=new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = dateTime.getDate();
        d = d<10?("0"+d):d;
        return y+"-"+m+"-"+d;
    };

    layui.use(['laydate','layer','jquery','element'],function () {
        //     var element = layui.element;
        //     var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var tomorrowTime = (new Date()).toLocaleStringTomorrow();
        var value1;
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
            ,max:tomorrowTime
            //每次点击清空之前的日期选择
            ,ready:function(){
                value1 = "";
            }
            ,done: function(value) {
                value1 = value;
            }
        });
        $("#serachBtn").on("click",function () {
            if (value1 == "" || value1 == undefined){
                value1 = "";
            }
            showChartOne();
            showChartTwo();
            showChartThree();
        });
        $(function () {
            value1="";
            showChartOne();
            showChartTwo();
            showChartThree();
        });

        var show;
        function tip(a,str) {
            //在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下
            if(a.length===0){
                show=str;
            }else {
                show='';
            }
        }

        //销量表===>最下边的柱状统计表
        function showChartOne() {
            var startAndend = value1.split(" - ");
            var start =startAndend[0];
            var end =startAndend[1];
            var myChart3 = echarts.init(document.getElementById('box3'));
            var option3 = {
                title:{
                    text:'各商品销量统计'
                },
                tooltip:{},
                toolbox:{
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    data: [],
                    axisLabel: {
                        rotate: 35
                    }
                },
                yAxis: {
                    type:'value'
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            //以下为是否显示，显示位置和显示格式的设置了
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}\n{b}'
                            }
                        }
                    },
                    data: []
                }]
            };
            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）
            $.ajax({
                type:"post",
                async:true,
                url:"${pageContext.request.contextPath}/chart/output",
                dataType:"json",
                data:{"start":start,"end":end,"value":value1},
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success:function (data) {
                    if (data.data) {
                        var obj3=eval(data.data);
                        for(var i=0;i<obj3.length;i++){
                            names.push(data.data[i].name);
                        }
                        for(var i=0;i<obj3.length;i++){
                            nums.push(data.data[i].num);
                        }
                        myChart3.setOption({        //加载数据图表
                            xAxis: {
                                data: names
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '销量',
                                data: nums
                            }]
                        });
                    }
                },
                error:function (erroemsg) {
                    alert("失败");
                }
            });
            option3 && myChart3.setOption(option3);
        }


        /*右边的饼状图*/
        function showChartTwo(){
            var startAndend = value1.split(" - ");
            var start =startAndend[0];
            var end =startAndend[1];
            var myChart2 = echarts.init(document.getElementById('box2'));
            // 指定图表的配置项和数据
            var option2 = {
                title: {
                    text: '各分店营销额统计',
                    subtext: '实时更新',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"  //百分比
                },
                itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = [
                                '#F0805A','#B5C334','#FCCE10','#E87C25','#60C0DD',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#27727B',
                                '#D7504B','#C6E579','#F4E001','#f36f8a','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            //    formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                toolbox:{
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [{
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    emphasis: {focus: 'data'},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            var aaa=[];
            $.ajax({
                type:"POST",
                url:'${pageContext.request.contextPath}/chart/sale',
                dataType:'json',
                data:{"start":start,"end":end,"value":value1},
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (data){
                    if(data.data){
                        var obj2 = eval(data.data);
                        for(var i=0;i<obj2.length;i++){
                            aaa.push(data.data[i]);
                        }
                    }
                    myChart2.setOption({
                        series:[{
                            name : '营销额',
                            data : aaa
                        }]
                    })
                }
            })
            // 使用刚指定的配置项和数据显示图表。
            option2 && myChart2.setOption(option2);
        }

        /*左边的饼状图*/
        function showChartThree(){
            var startAndend = value1.split(" - ");
            var start =startAndend[0];
            var end =startAndend[1];
            var myChart = echarts.init(document.getElementById('box1'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '本店进销统计',
                    subtext: '实时更新',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"  //百分比
                },
                color:['#F76000','#0ACF68'],
                toolbox:{
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',

                },
                series: [{
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            $.ajax({
                type:"POST",
                url:'${pageContext.request.contextPath}/chart/sell',
                dataType:'json',
                data:{"start":start,"end":end,"value":value1},
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (buyAndSell){
                    if(buyAndSell[0]>buyAndSell[1]){
                        $("#box1_1").html("亏损"+(buyAndSell[0]-buyAndSell[1])+"元");
                    }else if(buyAndSell[0]<buyAndSell[1]){
                        $("#box1_1").html("盈利"+(buyAndSell[1]-buyAndSell[0])+"元");
                    }
                    myChart.setOption({
                        series:[{
                            name : 'money',
                            data : [{value:buyAndSell[0],name:'成本额'},{value:buyAndSell[1],name:'营业额'}]
                        }]
                    })
                }
            })
            // 使用刚指定的配置项和数据显示图表。
            option && myChart.setOption(option);
        }

    })
</script>

</html>
